<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>${book.getBookName()}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/statics/css/comment.css" rel="stylesheet">
  <style>
    body{
      background-image: url("${pageContext.request.contextPath}/statics/images/bg.png");
    }
  </style>
</head>
<body>
<div class="container">

  <div class="row clearfix">
    <div class="col-md-12 column">
      <div class="page-header">
        <h1>
          <small>${book.getBookName()}</small>
          <a href="${pageContext.request.contextPath}/book/findAllBooks" class="btn btn-primary" style="float: right">返回</a>
        </h1>
      </div>
    </div>
  </div>

  <script>
    function re() {
      history.back()
    }
  </script>
  <div style="width: 100%;">

    <img src="${pageContext.request.contextPath}/book/readPhoto?bookISBN=${book.getBookISBN()}" style="width: 35%;height: 42%;float: left">

    <div style="float: left;width: 35%;margin-left: 5%;">
      <div style="width: 100%;height: 60px;"><h3 style="font-weight: bold;">${book.getDetail()}</h3></div><br><br><br>
      <div style="width: 100%;height: 120px;background-color: #e9e9e9;display: inline-block;">
        <p style="color: #999;margin-top: 10px;margin-left: 20px;font-size: 14px;">价格：<span style="font-size: 20px;color: red;font-weight: bold;margin-left: 54px;">¥ ${book.getBookPrices()}</span></p>
        <p style="color: #999;margin-top: 10px;margin-left: 20px;font-size: 14px;">数量：<span style="font-size: 20px;color: red;font-weight: bold;margin-left: 54px;">${book.getBookCounts()}</span></p>
        <p style="color: #999;margin-top: 10px;margin-left: 20px;font-size: 14px;">作者：<span style="font-size: 16px;color: #b5621b;margin-left: 54px;">${book.getAuthor()}</span></p>、
      </div>
      <div style="width: 400px;height: 30px;margin-top: 30px;">
        <p style="color: #999;margin-top: 10px;font-size: 14px;margin-left:20px">借阅说明：<span style="color: #605F5F;margin-left: 26px;">本网站图书免费借阅，请认真保护，损坏照价赔偿。</span></p>
      </div>
      <%--显示书籍图片--%>
      <div style="margin-left: 8%;margin-top: 20%">
        <button style="width:150px;height:40px;border: solid 1px red;background-color: #ffeded;"><a href="${pageContext.request.contextPath}/user/borrowBook?bookISBN=${book.getBookISBN()}" style="text-decoration: none;"><p style="color:red;font-size: 18px;line-height: 38px;">我要借阅</p></a></button>
        <button style="width:150px;height:40px;background-color: red;border: solid 1px red;margin-left: 10%"><a href="${pageContext.request.contextPath}/purchase/purchaseBook?bookISBN=${book.getBookISBN()}" style="text-decoration: none;"><p style="color:white;font-size: 18px;line-height: 38px">立即购买</p></a></button>
      </div>
    </div>

  </div>


  <div class="row clearfix" align="center">
    <div class="col-md-12 column">
      <div class="page-header" style="margin-top: 50px;">
        <h2>
          <small>${book.getBookName()}短评 · · · · · ·（全部${requestScope.page.rowCount}条）</small>
          <button class="btn btn-primary" onclick="display()">我来说两句</button>
        </h2>
      </div>
    </div>
  </div>

  <div class="comment" id='comment'>
    <div align="center" class="popup">
      <div id="header" class="ui-icon-circle-check">
        <br><br><h3>我来说两句--简单评论</h3><br><br>
        <form name="my_form" method="post" action="${pageContext.request.contextPath}/comment/addComments" align="center">
          <input type="text" name="bookISBN" value="${book.getBookISBN()}" hidden />
          <textarea cols="30" rows="8" name="content"></textarea>
          <br><br><br>
          <input type="submit" value="确认">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="button" value="取消" onclick="hid()">
        </form>
        <div id="header-right" onclick="hid()">X</div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    document.getElementById('comment').style.display="none";
    function display(){
      var identity = '<%=session.getAttribute("validated")%>';
      if (identity == "user"){
        document.getElementById('comment').style.display="";
      }else {
        alert("请先登录！");
      }
    }
    function hid(){
      document.getElementById('comment').style.display="none";
    }
  </script>

  <ul style="width: 70%;margin:0 auto;font-size: 18px;">
    <c:forEach var="comment" items="${commentList}">
      <li style="list-style: none;border-bottom: #a5a5a5 1px solid;">
        <br><br>
        <h5>
          <img src="${pageContext.request.contextPath}/user/readPhoto?username=${comment.getUserName()}" alt="" style="width: 5%;height: auto;border-radius: 50%;">
          <span style="font-size: 22px;font-weight: bold;margin-left: 5%;height: 5%;">${comment.getAuthor()}</span>
          <span style="float: right">${comment.getTime()}</span>
        </h5>
        <p>${comment.getContent()}</p>
        <br><br><br>
      </li>
    </c:forEach>
  </ul>
  <div style="margin-top: 4%;text-align: center" >
    <a onclick="more()" style="cursor: pointer;font-size: 18px;padding-bottom: 4%">>>这里查看更多评论（${requestScope.page.rowCount}条）</a>
  </div>
  <script language="JavaScript">
    function more(){
      var identity = '<%=session.getAttribute("validated")%>';
      if (identity == "user" || identity == "admin"){
        window.location.href = "${pageContext.request.contextPath}/comment/listComments?bookISBN=${book.getBookISBN()}";
      }else {
        alert("登录后才能查看更多评论哦~");
      }
    }
  </script>
</div>